<template>
  <el-menu
   default-active="1"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    >
    <el-menu-item @click="ChangeIsCollapse">
      <el-icon class="bar-icon"
        ><icon-menu>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-wyy"></use>
          </svg>
        </icon-menu>
      </el-icon> 
      <template #title > <span id="bar-title">{{title}}</span> </template>
    </el-menu-item>

    <el-menu-item
     v-for="item in AsideList"
     :key="item.id"
     :index="item.id"
     @click="goLink(item.router)"
     >
      <el-icon>
        <el-icon class="iconfont" :class="item.icon" />
      </el-icon>
      <template #title>{{ item.title }}</template>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from "vue";
import { useStore } from "vuex";
import {useRouter} from 'vue-router';
export default defineComponent({
  name: "MyAside",
  props: ['watchIsFlag'],
  setup(props) {
    const store = useStore();
    let isCollapse = ref(false)
    const ChangeIsCollapse = ()=>{
      store.dispatch('aside/changeIsCollapse')
      isCollapse.value = store.state.aside.isCollapse
      props.watchIsFlag(isCollapse.value)
    }

  const router = useRouter()
  const goLink = (path: string)=>{
    router.replace({name: path})
  }

  return {
      AsideList: computed(() => store.state.aside.AsideList),
      isCollapse,
      ChangeIsCollapse,
      goLink,
      title: computed(() => store.state.aside.title),
    };
  },
});
</script>

<style lang="less" scoped>
.el-menu{
  .el-menu-item{
      .bar-icon{
        font-size: 30px;
      }
      #bar-title{
        font-size: 20px;
        font-weight: 550;
      }
  }
}
</style>